import { useState } from "react";
const useStateFC = () => {
  // let str = "123"; // tip:这是普通变量 并不是一个状态（vue的响应式对象）
  // const [str, setStr] = useState("123"); //这是状态
  // const [arr, setArr] = useState([1, 2, 3]); //这是状态
  // const [obj, setObj] = useState(() => {
  //   // 处理初始逻辑，一定要返回一个值
  //   // 这个函数只会初始化执行一次
  //   return {
  //     name: "zs",
  //     age: 18
  //   };
  // }); //这是状态
  const [count, setCount] = useState(0);
  const handleChange = () => {
    // str = "456";
    // setStr("456");
    // tip:不能直接修改数组
    // arr.push(4);
    // setArr([...arr, 4]);
    //删除
    // setArr(arr.filter((item) => item !== 3));

    // setObj(Object.assign({}, obj, { age: 20 })); //合并对象
    //tip:异步任务 设计为了性能优化，不会立即执行，只会执行最后一次的修改
    // setCount(count + 1); //set函数队列 如果执行重复性操作 后续会阻断（自带防抖）
    // setCount(count + 1);
    // setCount(count + 1);
    setCount((pre) => pre + 1); //tip:通过回调函数解决异步问题
    setCount((pre) => pre + 1);
    setCount((pre) => pre + 1);
    // console.log(count); //输出0 同步代码先执行
  };
  return (
    <div>
      <h1>{count}</h1>
      {/* <h1>{str}</h1> */}
      {/* <div>姓名：{obj.name}</div> */}
      {/* <div>年龄：{obj.age}</div> */}
      <button onClick={handleChange}>change</button>
    </div>
  );
};

export default useStateFC;
